<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: LV
  Date: 2016/7/19
  Time: 18:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--    <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <!-- 全屏 -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- 上方栏显示 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <!-- 不自动识别号码 -->
        <meta name="format-detection" content="telephone=no">
        <link href="${ctx}/assets/public_skin/css/reset.css" rel="stylesheet">
        <link href="${ctx}/assets/public_skin/css/shop_style.css" rel="stylesheet">
        <script src="${ctx}/assets/public_skin/js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="${ctx}/assets/public_skin/js/shop.common.js" type="text/javascript"></script>--%>
    <title>发布商品</title>
    <script src="${ctx}/assets/public_skin/js/lrz/dist/lrz.all.bundle.js" type="text/javascript"></script>
    <script>
        function submit_form() {
            $("#product_form").submit();
        }
    </script>
</head>
<body>
<%--<header>--%>
<%--<h1>发布商品</h1>--%>
<%--<a href="javascript:;"></a>--%>
<%--</header>--%>
<article class="viewports">
    <form:form modelAttribute="unityFormatModel" action="${ctx}/product/savingPublishProduct" method="post"
               id="product_form">
        <input type="hidden" name="categoryId" value="${categoryId}"/>
        <ul class="plr20 lh1-5">
            <li class="mb10">
                <div class="c8">
                    <div class="odr2 plr10 mt20 b-ffffff">
                        <span>商品分类：</span>
                    <span class="c3">
                       <c:forEach items="${parentNames}" var="names">
                           ${names}>
                       </c:forEach>
                    </span>
                        <span class="r"><i class="ico-30 ico_arrow"></i></span>
                    </div>

                    <div class="odr2 plr10 mt20 b-ffffff">

                        <div class="layout-box">
                            <span>商品图片：</span>
                            <div class="box-col">
                                <div id="filelist"></div>
                                <ul class="upload_A ptb20">
                                    <li class="ir l mr10" id="upbtn">
                                        <input id="myfile" type="file" style="display:none"/>
                                        <a href="javascript:document.getElementById('myfile').click()"></a>
                                        <div class="list">
                                            <div class="ith_img usernane_img160"><span class="bg_span"></span></div>
                                            <i class="i_colse r100">&times;</i>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                        </div>


                            <%--<span>商品图片：</span>
                            <div id="filelist">
                                    &lt;%&ndash;接收图片地址，暂时写死&ndash;%&gt;
                                <input type="hidden" name="productImgs" value="1sda61fg6110.jpg"/>
                                <input type="hidden" name="productImgs" value="145465651656.jpg"/>
                            </div>
                            <ul class="upload_A ptb20" >

                                <li class="ir l mr10" id="upbtn">


                                    <input id="myfile" type="file" style="display:none"/>
                                    <a href="javascript:document.getElementById('myfile').click()"></a>
                                    <div style="display:block">
                                        <div class="ith_img usernane_img160"><span class="bg_span"></span></div>
                                    </div>
                                </li>
                            </ul>--%>
                    </div>


                    <div class="odr2 plr10 mt20 b-ffffff">
                        <input class="i_text" type="text" value="${unityFormatModel.productName}"
                               placeholder="商品名称（必填，50字以内）：" name="productName"/>
                    </div>
                    <form:errors path="productName"/>
                    <div class="odr2 plr10 mt20 b-ffffff">
                        <input class="i_text" type="text" value="${unityFormatModel.salePrice}" placeholder="商品价格（必填）："
                               name="salePrice"/>
                    </div>
                    <form:errors path="salePrice"/>
                    <div class="odr2 plr10 mt20 b-ffffff">
                        <input class="i_text" type="text" value="${unityFormatModel.inventoryNum}"
                               placeholder="商品库存（必填）：" name="inventoryNum"/>
                    </div>
                    <form:errors path="inventoryNum"/>
                    <div class="odr2 plr10 mt20 b-ffffff">
                        <input class="i_text" type="text" value="${unityFormatModel.productCode}"
                               placeholder="商品条码（必填）：" name="productCode"/>
                    </div>
                    <form:errors path="productCode"/>
                    <div class="odr2 plr10 mt20 b-ffffff">
                        <input class="i_text" type="text" value="${unityFormatModel.freight}" placeholder="运费（必填）："
                               name="freight"/>
                    </div>
                    <form:errors path="freight"/>
                    <div class="odr2 p10 mt20 b-ffffff">
                        <textarea class="i_textarea" style="height:4rem;" placeholder="商品描述（选填）"
                                  name="productDescription">${unityFormatModel.productDescription}</textarea>
                    </div>
                </div>
            </li>
        </ul>
    </form:form>
    <div class="tac pt20">
        <div class="pb30">
            <button class="b-ffaa3b cf ptb30 w fs30" onclick="submit_form()">发布商品</button>
        </div>
    </div>
</article>
<script type="text/javascript">
    document.querySelector('#myfile').addEventListener('change', function () {
        lrz(this.files[0], {
            width: 800
        })
                .then(function (rst) {

//                    alert(rst.base64);
//                    document.querySelector("#filelist").appendChild("<img src="+rst.base64+" />");
                    $("#upbtn").before('<li class="ir l mr10" pn="' + rst.origin.name + '"><div style="display:block"><div class="ith_img usernane_img160"><span class="bg_span" style=" background-image:url(' + rst.base64 + ')"></span></div><i  class="i_colse r100" onclick="del(this)">&times;</i></div></li>');

//                    $("#upbtn").before("<li class='ir'><img src="+rst.base64+" height='95px' /></li>");

                    // 额外添加参数
                    rst.formData.append('fileLen', rst.fileLen);

                    $.ajax({
                        url: '/file_upload', // 这个地址做了跨域处理，可以用于实际调试
                        data: {img: rst.base64},
                        type: 'POST',
                        success: function (data) {
//                            var r = JSON.stringify(data);
//                            alert(r);
//                            alert(r.code);
                            if (data.code == 0) {
                                $("#filelist").append('<input type="hidden" name="productImgs" value="' + data.url + '" pn="' + rst.origin.name + '"/>')
                            }

//                            alert(JSON.stringify(data));
                        }
                    });


                    // 处理成功会执行
                    console.log(rst);
                })
                .catch(function (err) {
                    // 处理失败会执行
//                    alert("err");
                })
                .always(function () {
                    // 不管是成功失败，都会执行
//                    alert("always");
                });
    });
    /*$(function(){
        $(".i_colse").bind("click",function(){
            var pn = $(this).parent().parent().attr("pn");
            alert(pn);
        })
    })*/

    function del(obj){

        var pn = $(obj).parent().parent().attr("pn");
        $(obj).parent().parent().remove();
        $("#filelist >input").each(function(){
            var cpn = $(this).attr("pn");
//            alert(cpn);
            if(cpn==pn){
                $(this).remove();
            }
        })
//        alert(pn);
    }
</script>
</body>
</html>
